<template>
    <div class="home">
        <fieldset class="left">
            <legend>小站介绍</legend>
            <p>小站理念：持续学习，持续分享，持续成长</p>
            <p>小站以qiankun框架构建底座，拓展可视化、低代码、网络通讯等模块</p>
            <p>整体技术框架：</p>
            <p>基座，vue3+vite+elementplus</p>
            <p>可视化模块，使用vue3+vite构建，运用css特效属性、echarts和canvas等实现一些常见视觉效果</p>
            <p>低代码模块，使用vue3+vite构建，采用slot、component、自定义render等动态控件，对表单表格组件进行封装，实现简单配置即可完成表单表格构建的效果</p>
            <p>网络通讯模块，使用vue3+vite构建，运用websocket、webRTC技术实现常见的聊天室和视频通话功能</p>
        </fieldset>
        <div class="danheng"></div>
    </div>
</template>

<script lang="ts" setup>


</script>

<style scoped lang="scss">
.home {
    width: 100%;
    height: 100%;


    position: relative;

    .left {
        width: 600px;
        height: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-100%, -55%);
        border-radius: 15px;
    }

    .danheng {
        width: 600px;
        height: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(0, -55%);
        background: url(/bg2.png) no-repeat;
        background-size: 100% 100%;
    }
}

.container {
    margin-top: 50px;
    height: calc(100vh - 50px);
}

.asider {
    width: 240px;
    float: right;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
</style>
